<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>{{ image.title|default:"图片详情" }}</title>
    {% load static %}
    <link rel="icon" href="/favicon.png" type="image/x-icon">
    <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'icon/bootstrap-icons.min.css' %}">
    <link rel="stylesheet" href="{% static 'site/view/main.css' %}">
</head>
<body>
    <div class="container">
        {% include 'common/nav.html' %}
        <div class="row">
            <!-- 主内容区 -->
            <div class="col-lg-8">
                <div class="image-container">
                    <div class="image-display">
                        <img src="{{ image.image_file.url }}" alt="{{ image.title }}" class="img-fluid">
                    </div>
                    
                    <div class="image-meta">
                        <h1 class="image-title">{{ image.title|default:"无标题" }}</h1>
                        
                        <div class="meta-item">
                            <div class="meta-label">上传者</div>
                            <div class="meta-value">
                                <a class="{{image.uploader.is_admin|yesno:"admin-name,nonadmin"}}" href="/user/{{image.uploader.id}}" style="text-decoration: none;">{{ image.uploader.username }}</a>
                                {% if image.uploader.is_admin %}
                                <span class="admin-badge">管理员</span>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="meta-item">
                            <div class="meta-label">上传时间</div>
                            <div class="meta-value">{{ image.date|date:"Y年m月d日 H:i" }}</div>
                        </div>
                        
                        {% if image.description %}
                        <div class="meta-item">
                            <div class="meta-label">描述</div>
                            <div class="description-content">{{ image.description }}</div>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            
            <!-- 侧边栏 -->
            <div class="col-lg-4">
                <div class="sidebar">
                    <h3 class="sidebar-title">
                        <i class="bi bi-tags"></i> 标签信息
                    </h3>
                    
                    {% if image.tags.all %}
                        {% for tag in image.tags.all %}
                        <div class="tag-item" tagid="{{tag.id}}" tagtype="{{tag.tag.tag_type}}">
                            <div class="tag-content">
                                <span class="tag-name">{{ tag.tag.name }}</span>
                                <span class="tag-value">
                                    {% if tag.tag.tag_type == 'BOOL' %}
                                        {{ tag.bool_value|yesno:"是,否" }}
                                    {% elif tag.tag.tag_type == 'DATE' %}
                                        {{ tag.date_value|date:"Y-m-d" }}
                                    {% else %}
                                        {{ tag.get_value }}
                                    {% endif %}
                                </span>
                                  
                            </div>
                            <div class="tag-actions admin-only" style="display: none;">
                                <span class="tag-action-btn text-danger" onclick="deleteTag({{tag.id}})">
                                    <i class="bi bi-x-circle"></i>
                                </span>
                                <span class="tag-action-btn text-primary" onclick="editTag({{tag.id}}, '{{tag.tag.name}}', '{{tag.tag.tag_type}}', '{{tag.get_value}}')">
                                    <i class="bi bi-pencil"></i>
                                </span>
                            </div>  
                        </div>
                        {% endfor %}
                    {% else %}
                        <div class="text-muted">此图片暂无标签</div>
                    {% endif %}
                    
                    <button class="btn btn-sm btn-outline-primary add-tag-btn admin-only" style="display: none;" onclick="showAddTagModal()">
                        <i class="bi bi-plus"></i> 添加标签
                    </button>
                    <div class="image-actions admin-only" style="display: none;">
                    <div class="info-item">
                        <div class="info-label">管理操作</div>
                        <div class="info-value">
                            <span class="status-badge {% if image.display %}status-public{% else %}status-hidden{% endif %}" id="display-status">
                                {{ image.display|yesno:"公开,隐藏" }}
                            </span>
                            <button class="btn btn-sm btn-warning admin-action-btn" onclick="toggleDisplay({{ image.id }})">
                                <i class="bi bi-toggle-on"></i> 切换显示状态
                            </button>
                        </div>
                    </div>
                </div>
                </div>
                
                <div class="sidebar">
                    <h3 class="sidebar-title">
                        <i class="bi bi-info-circle"></i> 图片信息
                    </h3>
                    <div class="tag-item">
                        <span class="tag-name">图片ID</span>
                        <span class="tag-value">{{ image.id }}</span>
                    </div>
                    <div class="tag-item">
                        <span class="tag-name">显示状态</span>
                        <span class="tag-value">{{ image.display|yesno:"公开,隐藏" }}</span>
                    </div>
                    <div class="tag-item">
                        <span class="tag-name">文件类型</span>
                        <span class="tag-value">{{ image.image_file.url|slice:"-4:"|upper }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑标签模态框 -->
    <div class="modal fade" id="editTagModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editTagModalTitle">编辑标签</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="editTagForm">
                        <input type="hidden" id="editTagId">
                        <input type="hidden" id="editTagType">
                        <div class="form-group">
                            <label>标签名称</label>
                            <input type="text" class="form-control" id="editTagName" readonly>
                        </div>
                        <div class="form-group">
                            <label>标签值</label>
                            <div id="editTagValueContainer">
                                <!-- 动态生成的输入框将在这里 -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveTag()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加标签模态框 -->
    <div class="modal fade" id="addTagModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">添加标签</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>选择标签</label>
                        <select class="form-control" id="addTagSelect" onchange="onTagSelectChange()">
                            <option value="">-- 选择标签 --</option>
                            <!-- 标签选项将通过API动态加载 -->
                        </select>
                    </div>
                    <div class="form-group">
                        <label>标签值</label>
                        <div id="addTagValueContainer">
                            <div class="loading">请先选择标签</div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="addNewTag()">添加</button>
                </div>
            </div>
        </div>
    </div>
    <script>const imageId={{image.id}}</script>
    <script src="{% static 'site/view/main.js' %}"></script>
</body>
</html>